<template>
  <div>
    <div>
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="id"
                         label="#"
                         width="180"></el-table-column>
        <el-table-column prop="registe_time"
                         label="注册日期"
                         width="180"></el-table-column>
        <el-table-column prop="username"
                         label="用户姓名"
                         width="180"></el-table-column>
        <el-table-column prop="city"
                         label="注册地址"></el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { allUserCount, UserList } from '../api/getDate1'
export default {
  name: "shoplist",
  data () {
    return {
      tableData: [],
      //每页显示的条数
      limit: 5,
      //总条数
      total: 0,
      //当前页码数
      currentPage: 1,
      //总页码数
      offset: 0,
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        //接口 获取用户总数量
        const res = await allUserCount()
        // console.log(res)
        if (res.status === 1) {
          this.total = res.count
        }
        this.getuser()
      } catch (error) {
        console.log(error, '获取用户总数量失败')
      }
    },
    async getuser () {
      try {
        //接口 获取用户列表
        const res = await UserList({
          limit: this.limit,
          offset: this.offset
        })
        // console.log(res)
        this.tableData = []
        res.users.forEach(item => {
          const tableData = {}
          tableData.id = item.id
          tableData.user_id = item.user_id
          tableData.username = item.username
          tableData.registe_time = item.registe_time
          tableData.city = item.city
          this.tableData.push(tableData)
        });
      } catch (error) {
        console.log(error, '获取用户列表失败');
      }
    },
    handleSizeChange (val) {
      this.limit = val
      this.offset = (this.currentPage - 1) * this.limit
      this.getuser()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.offset = (val - 1) * this.limit
      this.getuser()
    }
  }
}
</script>

<style scoped>
</style>
